/**
 * Created by 荆安喜 on 2017/11/24.
 */
$(function () {
    var ad = appData();
    var svg = d3.select('#map').append('g')
    $(function () {
        event()
        // selectTable()
        drawFlow(this.value)
    })


    //初始事件注册
    function event() {
        var height = parseInt($('.panel-body').css('height'))
        var width = $('.panel-body').css('width')
        $('svg').attr('height', height - 100).attr('width', width)
    }

    //选择菜单渲染
    function selectTable() {
        ad.selectList('KMGA_RESOURCES_FLOW', {}, function (data) {
            var str = ``
            data.forEach(function (d, i) {
                str = str + `<option value="${d.value}">${d.name}</option>`
            })
            $('#select').append(str)

            $('#select').change(function (d, i) {
                if (this.value == 0) {
                    return
                }
                drawFlow(this.value)
            })

        })
    }

    //绘制流向分析图
    function drawFlow(id) {

        ad.selectList('KMGA_RESOURCES_FLOWSELECT', {id: id}, function (data) {
            //重置流量分析图
            $('svg').find('g').empty()
            heardXY = []
            mindSXY = []
            linesData = []
            Top(data.dataHeard, 10, 0)
            mind(data.mindData, 240)
            line(data.lineDatas)
            acquisitionFTP(data.FTPData)
            showInfoImage()
        })

    }

    var heardXY = []
    //heard
    function Top(data, x, y) {
        var heard = svg.append('g')
        x = x || 10
        var topOne = heard.selectAll('rect').data(data).enter().append('g').attr('transform', function (d, i) {
            var c = x
            var objXY = {name: d.name, x: c, y: y + 150}
            heardXY.push(objXY)
            if (i == 0) {
                x = x + 10 + d.child.length * 80 + 40 + (d.child.length - 1) * 20
                return 'translate(' + c + ',' + y + ')'
            } else {
                x = x + 10 + d.child.length * 80 + 40 + (d.child.length - 1) * 20
                return 'translate(' + c + ',' + y + ')'
            }
        })

        topOne.append('rect').attr('x', function (d, i) {
            return 10
        }).attr('y', '40').attr('rx', '10').attr('ry', '10').attr('width', function (d, i) {
            heardXY[i].x = heardXY[i].x + (10 + d.child.length * 80 + 10 + (d.child.length - 1) * 20) / 2

            return 10 + d.child.length * 80 + 10 + (d.child.length - 1) * 20
        }).attr('height', 100).attr('stroke-width', 2).style({
            fill: 'none',
            stroke: 'blue'
        }).attr('stroke-dasharray', 5)


        topOne.append('image').attr('xlink:href', function (d, i) {
            return d.url
        }).attr('x', function (d, i) {
            return (d.child.length / 2) * 60
        })

        var topTwo = topOne.selectAll('g').data(function (d) {
            return d.child
        }).enter().append('g').attr('transform', function (d, i) {
            return 'translate(' + i * 90 + ',0)'
        })
        topTwo.append('image').attr('y', 50).attr('x', 20).attr('xlink:href', function (d, i) {
            return d.url
        }).attr('width', "80").attr('height', "70")

        topTwo.append('text').attr('x', 40).attr('y', 130).html(function (d) {
            return d.name
        })

    }


    var mindSXY = []
    //mind
    function mind(data, y, x) {
        var mind = svg.append('g')
        var Gx

        x = x || 10
        var mindOne = mind.selectAll('rect').data(data).enter().append('g').attr('transform', function (d, i) {
            var c = x
            var objXY = {name: d.name, x: c, y: y + 10}
            mindSXY.push(objXY)
            if (i == 0) {
                x = x + 10 + 2 * 80 + 30 + (2 - 1) * 20
                return 'translate(' + c + ',' + y + ')'
            } else {
                x = x + 10 + 2 * 80 + 30 + (2 - 1) * 20
                return 'translate(' + c + ',' + y + ')'
            }
        })


        mindOne.append('rect').attr('x', function (d, i) {
            return 10
        }).attr('y', '40').attr('rx', '10').attr('ry', '10').attr('width', function (d, i) {
            mindSXY[i].x = mindSXY[i].x + (10 + 2 * 80 + 10 + (2 - 1) * 20) / 2
            return 10 + 2 * 80 + 10 + (2 - 1) * 20
        }).attr('height', 160).attr('stroke-width', 2).style({
            fill: 'white',
            stroke: 'blue'
        }).attr('stroke-dasharray', 5)

        mindOne.append('text').attr('x', 80).attr('y', 30).html(function (d) {
            return d.name
        })
        mindOne.append('image').attr('xlink:href', function (d, i) {
                return d.icon
        }).attr('width', "20").attr('height', "20").attr('x', 150).attr('y', 13).on('click', function (d) {
            var h = Math.ceil(d.child.length / 12)
            var selectHeight = d3.select(this.parentElement).select('rect').attr('height')
            if (selectHeight > 160) {
                d3.select(this.parentElement).select('rect').transition().duration(2000).attr({
                    height: 160,
                    width: 200,
                })
                d3.select(this.parentElement).transition().duration(2000).attr('transform', function (d, i) {
                    return 'translate(' + Gx + ',' + y + ')'
                })
                //动态生成图片
                generate(this.parentElement, 'del', d.child.slice(0, 4))

                //隐藏多余结构
                hideG(this.parentElement, false, d.name, d.type)

                if (this.parentElement.__data__.name == 'FTP') {
                    lineChange(0)
                }


                //取消选择状态
                d3.selectAll('text').transition().duration(2000).attr('fill', 'black')
                d3.selectAll('path').attr('stroke', 'black').attr('stroke-width', 2)
                //还原path 显示
                d3.selectAll('path').on('mouseover', function (d) {
                    if (d.target.flow == undefined) {
                        $('.tooltips').html(`${d.source.name == 'FTP_CJY_ALL' ? 'FTP' : d.source.name}---${d.target.name}<br><div class="progress"><div class="progress-bar progress-bar-success" style="width: 100%"></div></div>上行流量：  ${d.target.sourceFlow}<br><div class="progress"><div class="progress-bar progress-bar-warning" style="width: 100%"></div></div>下行流量： ${d.target.targetFlow}`).css({
                            left: (d3.event.pageX - 230) + "px",
                            top: (d3.event.pageY - 130 ) + "px",
                            display: 'block'
                        })
                    } else {
                        $('.tooltips').html(`${d.source.name == 'FTP_CJY_ALL' ? 'FTP' : d.source.name}---${d.target.name}<br><div class="progress"><div class="progress-bar progress-bar-success" style="width: 100%"></div></div>上行流量：  ${d.target.flow}<br><div class="progress"><div class="progress-bar progress-bar-warning" style="width: 100%"></div></div>下行流量： ${d.source.flow}`).css({
                            left: (d3.event.pageX - 230) + "px",
                            top: (d3.event.pageY - 130) + "px",
                            display: 'block'
                        })
                    }
                })

                //顶部连线
                topLineChange(200, d.type)

            } else {
                d3.select(this.parentElement).select('rect').transition().duration(2000).attr({
                    height: h > 2 ? h * 80 : 161,
                    width: 1320,
                })
                //顶部连线
                topLineChange(1320, d.type)

                d3.select(this.parentElement).transition().duration(2000).attr('transform', function (d, i) {
                    Gx = d3.select(this).attr('transform').split('(')[1].split(',')[0]
                    return 'translate(0,' + y + ')'
                })
                //隐藏多余结构
                hideG(this.parentElement, true, d.name, d.type)
                //动态生成图片
                generate(this.parentElement, 'add', d.child)

                if (this.parentElement.__data__.name == 'FTP') {
                    lineChange(h > 2 ? (h - 2) * 80 : 0)
                }
                showInfoImage()
            }

        })

        var mindTwo = mindOne.selectAll('g').data(function (d) {
            return d.child
        }).enter().append('g')

        imageG(mindTwo)

        //动态生成图片
        function generate(obj, jude, data) {
            var addG = d3.select(obj).selectAll('g').data(data)
            if (jude == 'add') {
                addG.transition().duration(2000).attr('transform', function (d, i) {
                    var c = i % 13  //余数
                    var x = Math.floor(i / 13)
                    return 'translate(' + c * 95 + ',' + x * 80 + ')'
                })
                imageG(addG.enter().append('g'), true)
            } else {
                addG.transition().duration(2000).attr('transform', function (d, i) {
                    var c = i % 2  //余数
                    var x = Math.floor(i / 2)
                    return 'translate(' + c * 95 + ',' + x * 80 + ')'
                })
                delImageG(addG.exit(), false)
            }
        }

        //g图像
        function imageG(obj, jude) {
            obj.append('image').attr('xlink:href', function (d, i) {
                if (!jude) {
                    if (i > 3) {
                        $(this.parentElement).remove()
                        return
                    }
                }
                return d.url
            }).attr('width', "80").attr('height', "60").attr('x', 20).attr('y', 50).on('click', function (d) {
                var selectName = d.name
                //颜色变换
                if (d3.select(this.parentElement).select('text').attr('fill') == 'red') {
                    d3.selectAll('text').attr('fill', 'black')
                    d3.selectAll('path').attr('stroke', 'black').attr('stroke-width', 2)
                    d.to.forEach(function (c, i) {
                        d3.select('.' + d.from + '.' + c.name).on('mouseover', function (d) {
                            $('.tooltips').html(`${d.source.name}---${d.target.name}<br><div class="progress"><div class="progress-bar progress-bar-success" style="width: 100%"></div></div>上行流量：  ${d.target.flow}<br><div class="progress"><div class="progress-bar progress-bar-warning" style="width: 100%"></div></div>下行流量： ${d.source.flow}`).css({
                                left: (d3.event.pageX - 230) + "px",
                                top: (d3.event.pageY - 130) + "px",
                                display: 'block'
                            })
                        })
                    })
                    if (d.toFTP) {
                        d.toFTP.forEach(function (c, i) {
                            d3.select('.' + d.from + '.' + c.name).on('mouseover', function (d) {
                                $('.tooltips').html(`${d.source.name == 'FTP_CJY_ALL' ? 'FTP' : d.source.name}---${d.target.name}<br><div class="progress"><div class="progress-bar progress-bar-success" style="width: 100%"></div></div>上行流量：  ${d.target.sourceFlow}<br><div class="progress"><div class="progress-bar progress-bar-warning" style="width: 100%"></div></div>下行流量： ${d.target.targetFlow}`).css({
                                    left: (d3.event.pageX - 230) + "px",
                                    top: (d3.event.pageY - 130 ) + "px",
                                    display: 'block'
                                })
                            })
                        })
                    }
                } else {
                    //聚合处理
                    var set = new Set()
                    d.to.forEach(function (d, i) {
                        set.add(d.flowType)
                    })
                    set.forEach(function (c, i) {
                        d3.select('.' + d.from + '.' + c).transition().duration(1000).attr('stroke', 'red').attr('stroke-width', 6)
                        d3.select('.' + d.from + '.' + c).on('mouseover', function (p) {
                            var str = ``
                            d.to.forEach(function (h, i) {
                                if (h.flowType == c) {
                                    str = str + `${h.nameHeard}---${selectName}<br><div class="progress"><div class="progress-bar progress-bar-success" style="width: 100%"></div></div>上行流量：  ${h.flowTop}<br><div class="progress"><div class="progress-bar progress-bar-warning" style="width: 100%"></div></div>下行流量： ${h.flowDown}<br>`
                                }
                            })

                            $('.tooltips').html(str).css({
                                left: (d3.event.pageX - 230) + "px",
                                top: (d3.event.pageY - 130 ) + "px",
                                display: 'block'
                            })
                        })
                    })

                    /*d.to.forEach(function (c, i) {
                     d3.select('.' + d.from + '.' + c.name).transition().duration(1000).attr('stroke', 'red').attr('stroke-width', 6)
                     d3.select('.' + d.from + '.' + c.name).on('mouseover', function (d) {
                     $('.tooltips').html(`${c.nameHeard}---${selectName}<br><div class="progress"><div class="progress-bar progress-bar-success" style="width: 100%"></div></div>上行流量：  ${c.flowTop}<br><div class="progress"><div class="progress-bar progress-bar-warning" style="width: 100%"></div></div>下行流量： ${c.flowDown}`).css({
                     left: (d3.event.pageX - 230) + "px",
                     top: (d3.event.pageY - 130 ) + "px",
                     display: 'block'
                     })
                     })
                     })*/
                    if (d.toFTP) {
                        d.toFTP.forEach(function (c, i) {
                            d3.select('.' + d.from + '.' + c.name).transition().duration(1000).attr('stroke', 'red').attr('stroke-width', 6)
                            d3.select('text' + '.' + c.name).transition().duration(1000).attr('fill', 'red')
                            d3.select('.' + d.from + '.' + c.name).on('mouseover', function (d) {
                                $('.tooltips').html(`${selectName}---${d.target.name}<br><div class="progress"><div class="progress-bar progress-bar-success" style="width: 100%"></div></div>上行流量：  ${c.flowTop}<br><div class="progress"><div class="progress-bar progress-bar-warning" style="width: 100%"></div></div>下行流量： ${c.flowDown}`).css({
                                    left: (d3.event.pageX - 230) + "px",
                                    top: (d3.event.pageY - 130 ) + "px",
                                    display: 'block'
                                })
                            })
                        })
                    }
                    d3.selectAll('text').attr('fill', 'black')
                    d3.selectAll('path').attr('stroke', 'black').attr('stroke-width', 2)
                    d3.select(this.parentElement).select('text').attr('fill', 'red')
                }
            })

            obj.append('text').attr('x', 30).attr('y', 115).html(function (d) {
                return d.name
            })

            obj.append('image').attr('xlink:href', function (d, i) {
                return d.alarmUrl
            }).attr('x', 90).attr('y', 80)

            obj.transition().duration(2000).attr('transform', function (d, i) {
                if (jude) {
                    var c = i % 13  //余数
                    var x = Math.floor(i / 13)
                    return 'translate(' + c * 95 + ',' + x * 80 + ')'
                } else {
                    var c = i % 2  //余数
                    var x = Math.floor(i / 2)
                    return 'translate(' + c * 95 + ',' + x * 80 + ')'
                }
            })
        }

        //del g图像
        function delImageG(obj, jude) {
            obj.transition().duration(2000).attr('transform', function (d, i) {
                return 'translate(' + 0 + ',' + 0 + ')'
            }).remove()
        }

        //FTP连线位置变换
        function lineChange(y) {
            var diagonal = d3.svg.diagonal()
            d3.selectAll('.only').transition().duration(2000).attr('d', function (d, i) {
                var newS = $.extend({}, d.source);
                var newT = $.extend({}, d.target);
                var obj = {
                    source: newS,
                    target: newT
                }
                obj.source.y = obj.source.y + y
                return diagonal(obj)
            })

            d3.selectAll('.animateT').transition().duration(2000).attr('path', function (d, i) {
                var newS = $.extend({}, d.source);
                var newT = $.extend({}, d.target);
                var obj = {
                    source: newS,
                    target: newT
                }
                obj.source.y = obj.source.y + y
                return diagonal(obj)
            })

            d3.selectAll('.animateB').transition().duration(2000).attr('path', function (d, i) {
                var newS = $.extend({}, d.source);
                var newT = $.extend({}, d.target);
                var obj = {
                    source: newT,
                    target: newS
                }
                obj.target.y = obj.target.y + y
                return diagonal(obj)
            })
        }


        //顶部连线位置变换
        function topLineChange(x, type) {
            var diagonal = d3.svg.diagonal()
            var select = d3.selectAll('.' + type).filter(function (d, i) {
                if (d.target == undefined) {
                    return false
                }
                if (d.target.sourceFlow) {
                    return false
                } else {
                    return true
                }
            }).transition().duration(2000).attr('d', function (d, i) {
                var newS = $.extend({}, d.source);
                var newT = $.extend({}, d.target);
                var obj = {
                    source: newS,
                    target: newT
                }
                if (x != 200) {
                    obj.target.x = x / 2
                } else {
                    obj.target.x = obj.target.x
                }
                return diagonal(obj)
            })

            d3.selectAll('.animateMotionA' + '.' + type).transition().duration(2000).attr('path', function (d, i) {
                var newS = $.extend({}, d.source);
                var newT = $.extend({}, d.target);
                var obj = {
                    source: newS,
                    target: newT
                }
                if (x != 200) {
                    obj.target.x = x / 2
                } else {
                    obj.target.x = obj.target.x
                }
                return diagonal(obj)
            })
            d3.selectAll('.animateMotionB' + '.' + type).transition().duration(2000).attr('path', function (d, i) {
                var newS = $.extend({}, d.source);
                var newT = $.extend({}, d.target);
                var obj = {
                    source: newT,
                    target: newS
                }
                if (x != 200) {
                    obj.source.x = x / 2
                } else {
                    obj.source.x = obj.source.x
                }
                return diagonal(obj)
            })

        }


        //隐藏多余结构
        function hideG(obj, jude, name, type) {

            if (jude) {
                $(obj).siblings().hide()
                $('#lineTop').filter('.' + type)
                $('#lineTop').find(`path:not(.${type})`).parent().hide()

                if (name != 'FTP') {
                    $('#FTP').hide()
                }


            } else {
                setTimeout(function () {
                    $(obj).siblings().show()
                    $('#lineTop').filter('.' + type)
                    $('#lineTop').find(`path:not(.${type})`).parent().show()
                    if (name != 'FTP') {
                        $('#FTP').show()
                    }
                }, 2000)

            }

        }


    }


    var linesData = []
    //连线
    function line(data) {
        var diagonal = d3.svg.diagonal()

        var line = svg.append('g').attr('id', 'lineTop')
        data.forEach(function (d, i) {
            var obj = {
                source: {x: '', y: '', name: d.source, type: d.sourceType, flow: d.sourceFlow},
                target: {x: '', y: '', name: d.target, type: d.targetType, flow: d.targetFlow}
            }
            heardXY.forEach(function (c, i) {
                if (c.name == d.source) {
                    obj.source.x = c.x
                    obj.source.y = c.y
                }

            })
            mindSXY.forEach(function (c, i) {
                if (c.name == d.target) {
                    obj.target.x = c.x
                    obj.target.y = c.y
                }
            })
            linesData.push(obj)
        })
        var path = line.selectAll('path').data(linesData).enter().append('g')


        //光标动画效果
        path.append('image').attr('xlink:href', "assets/images/flow/metor.svg").attr('height', 20).attr('width', 50).attr('x', -30).attr('y', -10).style('opacity', 1).append('animateMotion')
            .attr('path', function (d, i) {
                return diagonal(d)
            }).attr('rotate', 'auto').attr('repeatCount', 'indefinite').attr('dur', '8s').attr('class', function (d, i) {
            return 'animateMotionA ' + d.target.type
        })


        path.append('image').attr('xlink:href', "assets/images/flow/metor1.svg").attr('height', 20).attr('width', 50).attr('x', -30).attr('y', -10).style('opacity', 1).append('animateMotion')
            .attr('path', function (d, i) {
                var obj = {
                    source: d.target,
                    target: d.source
                }
                return diagonal(obj)
            }).attr('rotate', 'auto').attr('repeatCount', 'indefinite').attr('dur', '8s').attr('class', function (d, i) {
            return 'animateMotionB ' + d.target.type
        })


        path.append('path').attr('d', function (d, i) {
            return `M${d.source.x},${d.source.y}C${(d.source.x + d.target.x) / 2},${(d.source.y + d.target.y) / 2} ${(d.source.x + d.target.x) / 2},${(d.source.y + d.target.y) / 2} ${d.source.x},${d.source.y}`
        }).on('mouseover', function (d) {
            $('.tooltips').html(`${d.source.name}---${d.target.name}<br><div class="progress"><div class="progress-bar progress-bar-success" style="width: 100%"></div></div>上行流量：  ${d.target.flow}<br><div class="progress"><div class="progress-bar progress-bar-warning" style="width: 100%"></div></div>下行流量： ${d.source.flow}`).css({
                left: (d3.event.pageX - 230) + "px",
                top: (d3.event.pageY - 130) + "px",
                display: 'block'
            })

        }).on('mouseout', function () {
            $('.tooltips').css('display', 'none')
        }).on('mousemove', function () {
            $('.tooltips').css({
                left: (d3.event.pageX - 230) + "px",
                top: (d3.event.pageY - 130) + "px",
            })
        }).transition().duration(2000).attr('d', function (d, i) {
            return diagonal(d)
        }).attr('fill', 'none').attr('stroke', 'black').attr('stroke-width', 2).attr('class', function (d, i) {
            return d.target.type + " " + d.source.type
        }).style('opacity', 0.3)


    }

    //FTP采集源
    function acquisitionFTP(data) {
        var FTP = svg.append('g').attr('id', 'FTP')
        var diagonal = d3.svg.diagonal()

        var tree = d3.layout.tree()
            .size([1200, 180]).separation(function (a, b) {
                return (a.parent == b.parent ? 1 : 2)
            })
        var nodes = tree.nodes(data)
        var links = tree.links(nodes)
        var path = FTP.append('g').selectAll().data(links).enter().append('g')


        //光标动画效果
        path.append('image').attr('xlink:href', "assets/images/flow/metor.svg").attr('height', 20).attr('width', 50).attr('x', -30).attr('y', -10).style('opacity', 1).append('animateMotion')
            .attr('path', function (d, i) {
                return diagonal(d)
            }).attr('rotate', 'auto').attr('repeatCount', 'indefinite').attr('dur', '8s').attr('class', 'animateT')


        path.append('image').attr('xlink:href', "assets/images/flow/metor1.svg").attr('height', 20).attr('width', 50).attr('x', -30).attr('y', -10).style('opacity', 1).append('animateMotion')
            .attr('path', function (d, i) {
                var obj = {
                    source: d.target,
                    target: d.source
                }
                return diagonal(obj)
            }).attr('rotate', 'auto').attr('repeatCount', 'indefinite').attr('dur', '8s').attr('class', 'animateB')


        path.append('path').attr('d', function (d, i) {
            return `M${d.source.x},${d.source.y}C${(d.source.x + d.target.x) / 2},${(d.source.y + d.target.y) / 2} ${(d.source.x + d.target.x) / 2},${(d.source.y + d.target.y) / 2} ${d.source.x},${d.source.y}`
        }).on('mouseover', function (d) {
            $('.tooltips').html(`${d.source.name == 'FTP_CJY_ALL' ? 'FTP' : d.source.name}---${d.target.name}<br><div class="progress"><div class="progress-bar progress-bar-success" style="width: 100%"></div></div>上行流量：  ${d.target.sourceFlow}<br><div class="progress"><div class="progress-bar progress-bar-warning" style="width: 100%"></div></div>下行流量： ${d.target.targetFlow}`).css({
                left: (d3.event.pageX - 230) + "px",
                top: (d3.event.pageY - 130 ) + "px",
                display: 'block'
            })
        }).on('mouseout', function () {
            $('.tooltips').css('display', 'none')
        }).on('mousemove', function () {
            $('.tooltips').css({
                left: (d3.event.pageX - 230) + "px",
                top: (d3.event.pageY - 130 ) + "px",
            })
        }).transition().duration(2000).attr('d', function (d, i) {
            return diagonal(d)
        }).attr('fill', 'none').attr('stroke', 'black').attr('stroke-width', 2).attr('class', function (d, i) {
            return d.target.type + " " + d.source.type + " " + d.source.only
        }).style('opacity', 0.3)


        var node = FTP.append('g').selectAll().data(nodes).enter().append('g')


        node.append('image').attr('xlink:href', function (d, i) {
            return d.url
        }).attr('width', "80").attr('height', "60").attr('x', 20).attr('y', 50)

        node.append('text').attr('class', function (d, i) {
            return d.type
        }).attr('x', 30).attr('y', 115).html(function (d, i) {
            if (i == 0) {
                return
            }
            return d.name
        })

        node.attr('transform', function (d, i) {
            return 'translate(' + (d.x - 60) + ',' + (d.y - 55) + ')'
        })


        FTP.attr('transform', function (d, i) {
            return 'translate(' + -20 + ',' + 440 + ')'
        })


    }


    //全部图标添加事件
    function showInfoImage() {
        d3.selectAll('image').filter(function (d, i) {
            if (d3.select(this).attr('width') == '80') {
                if (d.name == 'FTP_CJY_ALL') {
                    return false
                }
                return true
            }
        }).on('mouseover', function (d) {
            //告警消息
            var str = ``
            str = str + `名称：${d.name}<br>`
            if(d.message){
                d.message.forEach(function (c,i) {
                    str=str+`IP:${c.clientIp}<br>`
                    str=str+`<span >写入流量:${c.inNum}</span><span>安全区间:${c.inLimit}</span><span>告警情况:${c.inStatus}</span><br>`
                    str=str+`<span>读取流量:${c.outNum}</span><span>安全区间:${c.outLimit}</span><span>告警情况:${c.outStatus}</span><br>`
                })
            }

            $('.tooltips').html(str).css({
                left: (d3.event.pageX - 230) + "px",
                top: (d3.event.pageY - 130 ) + "px",
                display: 'block'
            })
        }).on('mouseout', function () {
            $('.tooltips').css('display', 'none')
        }).on('mousemove', function () {
            $('.tooltips').css({
                left: (d3.event.pageX - 230) + "px",
                top: (d3.event.pageY - 130 ) + "px",
            })
        })

        d3.selectAll('text').html(function (d) {
            if (d == '其他或已删除集群') {
                return name
            }
            if (d.name.length > 4) {
                var name = `${d.name.slice(0, 4)}.`
            } else {
                var name = d.name
            }
            if (d.name == 'FTP_CJY_ALL') {
                var name = ''
            }


            return name
        })
    }

})